<template>
  <div class="card">
    <!-- 天气卡片上半部分 -->
    <div class="card-top">
      <div class="card-list" v-for="(son, index) in father">
        <span>{{ son.weekText }}</span>
        <span>{{ son.date }}</span>
        <span>{{ son.dayweather }}</span>
        <span>{{ son.windInfo }}</span>
      </div>
    </div>
    <!-- 天气卡片下半部分 -->
    <div class="card-bottom">
      <v-chart class="chart" :option="wchart" autoresize></v-chart>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

//引入pinia
import { storeToRefs } from 'pinia';
import { useLocalStore } from '@/stores/local';
const { localWeatherp } = storeToRefs(useLocalStore());
console.log('发挺好玩', localWeatherp.value);

// 导入需要的 图表插件
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// 引入 图表插件
use([GridComponent, LineChart, CanvasRenderer]);

// cards数据
const father = ref([]);

// 星期映射（根据实际接口逻辑调整，比如 week=2 对应周二）
const weekMap = {
  1: '周一',
  2: '周二',
  3: '周三',
  4: '周四',
  5: '周五',
  6: '周六',
  7: '周日',
};

// 监听 localWeatherp 变化，格式转换，赋值
watch(
  localWeatherp,
  (newVal) => {
    if (newVal && newVal.length) {
      father.value = newVal.map((item, index) => {
        // 动态生成“今天”“明天”“周三”...的逻辑
        const weekText =
          index === 0 ? '今天' : index === 1 ? '明天' : weekMap[item.week];

        return {
          weekText, // 用于渲染“今天/明天/周X”
          date: item.date.split('-').slice(1).join('-'),
          dayweather: item.dayweather,
          windInfo: `风力 ${item.daypower}级`,
          daytemp: item.daytemp, // 白天温度
          nighttemp: item.nighttemp, // 夜晚温度
        };
      });
    }
  },
  { immediate: true }
);

// chart配置项
const wchart = ref({});
const renderChart = () => {
  // 从 father 提取图表所需数据
  const xData = father.value.map((item) => item.weekText);
  const dayTempData = father.value.map((item) => item.daytemp);
  const nightTempData = father.value.map((item) => item.nighttemp);

  wchart.value = {
    grid: {
      left: 0,
      right: 0,
      top: 50,
      bottom: 0,
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: {
        show: false, // 隐藏 x 轴文字
      },
      axisTick: {
        show: false, // 隐藏 x 轴刻度线
      },
      axisLine: {
        show: false, // 隐藏 x 轴线
      },
    },
    yAxis: {
      type: 'value',
      min: 20,
      max: 40,
      interval: 5,
      axisLabel: {
        show: false, // 隐藏 y 轴文字
      },
      axisTick: {
        show: false, // 隐藏 y 轴刻度线
      },
      axisLine: {
        show: false, // 隐藏 y 轴线
      },
      splitLine: {
        show: false, // 隐藏网格线
      },
    },
    series: [
      {
        type: 'line',
        name: '白天温度', // 新增名称，图表 tooltip 会显示
        data: dayTempData,
        // lable标签
        label: {
          show: true,
          position: 'top',
          formatter: (params) => `白${params.value}℃`,
          color: '#ffffff',
        },
        // 折线样式
        lineStyle: {
          color: '#7b68ee',
        },
        smooth: true, // 折线平滑
        // 点样式
        symbol: 'circle', // 让折点显示为圆点
        symbolSize: 8, // 调整点大小
      },
      {
        type: 'line',
        name: '夜晚温度', // 新增名称
        data: nightTempData,
        label: {
          show: true,
          position: 'bottom',
          formatter: (params) => `晚${params.value}℃`,
          color: '#ffffff',
        },
        lineStyle: {
          color: '#90ee90',
        },
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
      },
    ],
  };
};
// ✅ 监听 father 变化，数据完整后再渲染图表
watch(
  father,
  (newVal) => {
    if (newVal.length > 0) {
      // 确保有数据
      renderChart();
    }
  },
  { immediate: true }
); // immediate：初始化时也触发一次
</script>

<style lang="scss" scoped>
// 容器 背景等样式
.card {
  margin-top: 10px;
  padding: 40px 48px;
  background-color: #004e71;

  //-=====================顶部组件
  .card-top {
    display: flex;
    gap: 24px;
    text-align: center;

    //每个列表
    .card-list {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      gap: 16px;
      font-size: 17px;
      flex: 1 1 0%; /* 每个元素 平均分配空间 */
    }
  }
  //========================底部图表
  .card-bottom {
    .chart {
      height: 130px;
    }
  }
}
</style>
